<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<em class="ddp-bg-back"></em>
<div class="ddp-ui-contents-in ddp-scroll">
  <!-- top -->
  <div class="ddp-ui-contents-top">
    <div class="ddp-ui-title">
      {{'msg.comm.menu.manage.storage' | translate}}
    </div>
    <!-- tab -->
    <ul class="ddp-list-top-tab">
      <li class="ddp-selected">
        <a [routerLink]="['/management/storage/datasource']">{{'msg.comm.menu.manage.storage.ds' | translate}}</a>
      </li>
      <li>
        <a [routerLink]="['/management/storage/data-connection']">{{'msg.comm.menu.manage.storage.conn' | translate}}</a>
      </li>
    </ul>
    <!-- //tab -->

  </div>
  <!-- //top -->
  <div class="ddp-ui-contents-list">
    <div class="ddp-wrap-top-filtering">
      <!-- filter search -->
      <div class="ddp-filter-search ddp-fright">
        <div class="ddp-form-filter-search">
          <component-input
            [autoFocus]="false"
            [isEnableDelete]="true"
            [value]="searchKeyword"
            [placeHolder]="'msg.storage.ph.source.search' | translate"
            (changeValue)="onChangedSearchKeyword($event)">
          </component-input>
        </div>
        <!-- form -->
        <a href="javascript:" class="ddp-btn-selection" (click)="reloadPage(true)">{{'msg.comm.btn.search' | translate}}</a>
      </div>
      <!-- //filter search -->
      <!-- filters -->
      <component-criterion [criterionApiFunc]="criterionApiFunc"
                           (changedFilter)="onChangedFilter($event)">
      </component-criterion>
      <!-- //filters -->
    </div>
    <!-- create datasource -->
    <div class="ddp-filter-option">
      <!-- list length -->
      <span class="ddp-data-total ddp-only" [innerHtml]="'msg.storage.ui.list.length' | translate: {value: pageResult.totalElements || 0}"></span>
      <!-- //list length -->
      <a href="javascript:" class=" ddp-btn-pop ddp-bg-black" (click)="changeMode('create-data-source')"><em class="ddp-icon-add2"></em>{{'msg.comm.btn.new' | translate}}</a>
    </div>
    <!-- //create datasource -->
    <div class="ddp-data-source-none" *ngIf="isEmptyList(); else existList">
      {{'msg.comm.ui.no.rslt' | translate}}
    </div>
    <!-- //no result -->
    <ng-template #existList>
      <table class="ddp-table-form ddp-table-type3">
        <colgroup>
          <col width="*">
          <col width="10%">
          <col width="13%">
          <col width="7%">
          <col width="20%">
        </colgroup>
        <thead>
        <tr>
          <th>
            {{'msg.comm.th.ds' | translate}}
          </th>
          <th>
            {{'msg.storage.th.data_type' | translate}}
          </th>
          <th>
            {{'msg.storage.th.ingestion_type' | translate}}
          </th>
          <th>
            {{'msg.storage.th.status' | translate}}
          </th>
          <th class="ddp-cursor" (click)="sortDatasourceList('createdTime')">
            {{'msg.comm.th.created' | translate}}
            <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'createdTime' && selectedContentSort.sort === 'asc'"></em>
            <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'createdTime' && selectedContentSort.sort === 'desc'"></em>
          </th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let datasource of datasourceList" (click)="onClickDatasource(datasource.id)">
          <td>
            <div class="ddp-txt-long" [class.ddp-global]="datasource.published">
              {{datasource.name}}
              <em class="ddp-icon-info3" *ngIf="datasource.fieldsMatched === false"></em>
              <span class="ddp-txt-colortype" *ngIf="datasource.description">-{{datasource.description}}</span>
              <em class="ddp-tag-global" *ngIf="datasource.published">{{'msg.comm.ui.list.ds.opendata' | translate}}</em>
            </div>
          </td>
          <td>
            {{getDataTypeChange(datasource.srcType)}}
          </td>
          <td>
            {{(datasource.connType.toString() == 'ENGINE' ? 'msg.storage.ui.list.ingested.data':'msg.storage.ui.list.linked.data') | translate}}
          </td>
          <td>
            <span class="{{getSourceStatusIcon(datasource.status)}}">{{getSourceStatusLabel(datasource.status)}}</span>
          </td>
          <td class="ddp-data-last">
            {{datasource.createdTime | mdate: 'YYYY-MM-DD HH:mm'}}  <em class="ddp-icon-by">{{'msg.storage.ui.by' | translate}}</em>{{datasource.createdBy.fullName}}
            <div class="ddp-btn-control">
              <em class="ddp-icon-control-cut" (click)="onClickRemoveDatasource(datasource); $event.stopPropagation()"></em>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <!-- Pagination -->
      <component-pagination [info]="pageResult" (changePageData)="changePage($event)"></component-pagination>
      <!-- // Pagination -->
    </ng-template>
  </div>
</div>
<!-- 데이터소스 생성 -->
<app-create-data-source *ngIf="mode=='create-data-source'"
                        (sourceCreateClose)="changeMode( '' )"
                        (sourceCreateComplete)="createComplete()"></app-create-data-source>
<!-- 삭제 모달 -->
<app-delete-modal (deleteConfirm)="removeDatasource($event)"></app-delete-modal>
<!-- 데이터소스 상세 -->
